<template>
  <el-container class="goods-view panel-block">
    <el-container class="goods-index-main">
      <el-container class="sa-p-r-16 sa-p-l-16">
        <el-header class="sa-header">
          <el-tabs class="sa-tabs" v-model="filterParams.data.status" @tab-change="getData(1)">
            <el-tab-pane v-for="sl in statusList.data" :key="sl" :label="sl.name" :name="sl.type"></el-tab-pane>
          </el-tabs>
          <div class="sa-title sa-flex sa-row-between">
            <div class="label sa-flex">
              <span class="left">商品列表</span>
              <!-- <search-condition :conditionLabel="filterParams.conditionLabel"
                @deleteFilter="deleteFilter"></search-condition> -->
                <el-radio-group v-model="name" style="margin-left: 20px;" @change="radiochange">
                  <el-radio-button label="1688">1688</el-radio-button>
                  <el-radio-button label="yzh">云中鹤</el-radio-button>
                </el-radio-group>
            </div>
            <div>
              <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
              <!-- <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button> -->
              <!-- <el-button v-auth="'shop.admin.goods.goods.add'" icon="Plus" type="primary" @click="addRow">新建</el-button>
              <el-button v-auth="'shop.admin.goods.goods.recyclebin'" type="danger" icon="Delete" plain
                @click="openRecyclebin">回收站</el-button> -->
            </div>
          </div>
        </el-header>
        <el-main class="sa-p-0">
          <div class="sa-table-wrap" v-loading="loading">
            <template v-if="name === '1688'">
              <el-table height="100%" class="sa-table" :data="table.data"
              @selection-change="changeSelection" @sort-change="fieldFilter" @row-dblclick="editRow"
              :expand-row-keys="expandRowKeys" row-key="id" stripe>
              <template #empty>
                <sa-empty></sa-empty>
              </template>
              <el-table-column type="selection" width="48" align="center"></el-table-column>
              <el-table-column sortable="custom" prop="itemId" label="ID" min-width="150"></el-table-column>
              <el-table-column label="商品" min-width="440">
                <template #default="scope">
                  <goods-item :goods="{
                    image: scope.row.imgUrl,
                    title: scope.row.title,
                    subtitle: scope.row.subtitle,
                    activities: scope.row.activities,
                    promos: scope.row.promos,
                  }" mode="goods"></goods-item>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="price" label="供货价" min-width="150" align="center">
                <template #default="scope">
                  <div v-if="scope.row.minPrice === scope.row.maxPrice">{{ scope.row.minPrice / 100 }}</div>
                  <div v-else>{{ scope.row.minPrice / 100 + ' ~ ' + scope.row.maxPrice / 100 }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="price" label="售价" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.price ? scope.row.price : '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="buy_price" label="商家采购价" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.buy_price ? scope.row.buy_price : '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="上架状态" min-width="150" align="left">
                <template #default="scope">
                  <div>{{ statustext[scope.row.status] }}</div>
                </template>
              </el-table-column>
              <el-table-column label="更新时间" width="172">
                <template #default="scope">{{ scope.row.c_time || '--' }}</template>
              </el-table-column>
              <el-table-column label="操作" min-width="240" fixed="right">
                <template #default="scope">
                  <div class="sa-flex">
                    <el-button v-auth="'shop.admin.goods.goods.detail'" class="is-link sa-m-l-12" type="primary"
                      @click="editRow1688(scope.row)">编辑</el-button>
                      <!-- <el-button class="is-link sa-m-l-12" type="primary"
                      @click="deleteRow1688(scope.row)" :disabled="statustext[scope.row.status] !== '下架'">删除</el-button> -->
                      <el-popconfirm
                      width="fit-content"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      title="确认删除这条记录?"
                      :disabled="statustext[scope.row.status] !== '下架'"
                      @confirm="deleteRow1688(scope.row)"
                    >
                      <template #reference>
                        <el-button
                          class="is-link"
                          type="danger"
                          :disabled="statustext[scope.row.status] !== '下架'"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-popconfirm>
                    <!-- <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'history')">记录</el-button>
                    <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'price')">价格变动</el-button> -->
                    <!-- <el-popconfirm
                        width="fit-content"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        title="确认删除这条记录?"
                        @confirm="deleteRow(scope.row.id)"
                      >
                        <template #reference>
                          <el-button
                            v-auth="'shop.admin.goods.goods.delete'"
                            class="is-link"
                            type="danger"
                          >
                            删除
                          </el-button>
                      </el-popconfirm> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            </template>
            <template v-else>
            <el-table height="100%" v-if="filterParams.data.status == 'recyclebin'" class="sa-table" :data="table.data"
              @selection-change="changeSelection" @sort-change="fieldFilter" @row-dblclick="editRow"
              :expand-row-keys="expandRowKeys" row-key="id" stripe>
              <template #empty>
                <sa-empty></sa-empty>
              </template>
              <!-- <el-table-column width="96"></el-table-column> -->
              <el-table-column type="selection" width="48" align="center"></el-table-column>
              <el-table-column sortable="custom" prop="goodsSkuCode" label="ID" min-width="180"></el-table-column>
              <el-table-column label="商品" min-width="440">
                <template #default="scope">
                  <goods-item :goods="{
                    image: scope.row.main_img,
                    title: scope.row.title || scope.row.goodsName,
                    subtitle: scope.row.subtitle,
                    activities: scope.row.activities,
                    promos: scope.row.promos,
                  }" mode="goods"></goods-item>
                </template>
              </el-table-column>
              <el-table-column prop="from_text" label="商品来源" min-width="150" align="center">
              </el-table-column>
              <el-table-column sortable="custom" prop="price" label="供货价" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.sellPrice }}</div>
                </template>
              </el-table-column>
              <!-- <el-table-column sortable="custom" prop="sellPrice" label="价格" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.sellPrice || '--' }}</div>
                </template>
              </el-table-column> -->
              <el-table-column sortable="custom" prop="price" label="售价" min-width="200" align="center">
                <template #default="scope">
                  <div>{{ scope.row.price || '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="buy_price" label="商家采购价" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.buy_price ? scope.row.buy_price : '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="sales" label="销量" min-width="100"
                align="center">
                <template #default="scope">
                  <div>{{ scope.row.sales || '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="views" label="浏览量" min-width="100"
                align="center">
                <template #default="scope">
                  <div>{{ scope.row.views || '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column label="库存" min-width="100" align="center">
                <template #default="scope">
                  <div class="sa-flex sa-row-center stock">
                    <span>{{ scope.row.stock || 0 }}</span>
                    <!-- <el-button v-auth="'shop.admin.goods.goods.addstock'" class="add-stock" link>
                      <sa-icon name="sa-shop-goods-add-stock" @click="editStock(scope.row)" />
                    </el-button> -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="来源" min-width="100" align="center">
                <template #default="scope">
                  {{ scope.row.from_text || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="更新时间" width="172">
                <template #default="scope">{{ scope.row.create_time || '--' }}</template>
              </el-table-column>
              <el-table-column label="操作" min-width="240" fixed="right">
                <template #default="scope">
                  <div class="sa-flex">
                    <el-button v-auth="'shop.admin.goods.goods.edit'" link>
                      <!-- <el-dropdown popper-class="goods-dropdown" @command="handleCommand"> -->
                        <el-tag :type="statusList.color[scope.row.status_text]">
                          <span>{{ scope.row.status_text }}</span>
                          <!-- <span>{{ statustext[scope.row.status] }}</span> -->
                          <!-- <el-icon class="sa-m-l-4">
                            <ArrowDown />
                          </el-icon> -->
                        </el-tag>
                        <!-- <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'up',
                            }">
                              <span class="status-up">上架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'down',
                            }">
                              <span class="status-down">下架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'hidden',
                            }">
                              <span class="status-hidden">隐藏</span>
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template> -->
                      <!-- </el-dropdown> -->
                    </el-button>
                    <el-button v-auth="'shop.admin.goods.goods.detail'" class="is-link sa-m-l-12" type="primary"
                      @click="editRow(scope.row)">编辑</el-button>
                    <!-- <el-button class="is-link sa-m-l-12" type="primary"
                      @click="deleteRow(scope.row)" :disabled="scope.row.status_text !== '已下架'">删除</el-button> -->
                      <el-popconfirm
                      width="fit-content"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      title="确认删除这条记录?"
                      :disabled="scope.row.status_text !== '已下架'"
                      @confirm="deleteRow(scope.row)"
                    >
                      <template #reference>
                        <el-button
                          class="is-link"
                          type="danger"
                          :disabled="scope.row.status_text !== '已下架'"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-popconfirm>
                    <!-- <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'history')">记录</el-button>
                    <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'price')">价格变动</el-button> -->
                    <!-- <el-popconfirm
                        width="fit-content"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        title="确认删除这条记录?"
                        @confirm="deleteRow(scope.row.id)"
                      >
                        <template #reference>
                          <el-button
                            v-auth="'shop.admin.goods.goods.delete'"
                            class="is-link"
                            type="danger"
                          >
                            删除
                          </el-button>
                      </el-popconfirm> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-table height="100%" class="sa-table" :data="table.data" @selection-change="changeSelection"
              @sort-change="fieldFilter" @row-dblclick="editRow" :expand-row-keys="expandRowKeys" row-key="id" stripe
              v-else>
              <template #empty>
                <sa-empty></sa-empty>
              </template>
              <el-table-column type="expand">
                <template #default="props">
                  <el-table class="sa-table sa-expand-table" :data="skuPrice.data" stripe>
                    <el-table-column width="96"></el-table-column>
                    <el-table-column prop="goodsSkuCode" label="ID" min-width="180"></el-table-column>
                    <el-table-column label="商品" min-width="440">
                      <!-- <template #default="scope">
                        <div class="sa-flex sa-m-l-16">
                          <sa-preview :url="scope.row.image || props.row.image" size="32"></sa-preview>
                          <div class="sku-text sa-m-l-28">
                            {{ scope.row.goods_sku_text?.join('/') }}
                          </div>
                        </div>
                      </template> -->
                      <template #default="scope">
                        <goods-item :goods="{
                          image: scope.row.main_img,
                          title: scope.row.title || scope.row.goodsName,
                          subtitle: scope.row.subtitle,
                          activities: scope.row.activities,
                          promos: scope.row.promos,
                        }" mode="goods"></goods-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="sellPrice" label="供货价" min-width="150" align="center">
                      
                      <template #default="scope">
                        <div>{{ scope.row.sellPrice || '--' }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label="售价" min-width="200" align="center">
                      <template #default="scope">
                        <div>{{ scope.row.price || '--' }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="buy_price" label="商家采购价" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.buy_price ? scope.row.buy_price : '--' }}</div>
                </template>
              </el-table-column>
                    <el-table-column prop="sales" label="销量" min-width="100" align="center">
                      <template #default="scope">
                        <div>{{ scope.row.sales || '--' }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="浏览量" min-width="100" align="center">
                      <template #default="scope">{{ scope.row.views || '--' }}</template>
                    </el-table-column>
                    <el-table-column label="来源" min-width="100" align="center">
                      <template #default="scope">
                        {{ scope.row.from_text || '--' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="库存" min-width="100" align="center" />
                    <el-table-column label="更新时间" width="172">
                      <template #default>-</template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" min-width="240">
                      <template #default="scope">
                        <el-button v-auth="'shop.admin.goods.skuprice.edit'" link>
                          <el-dropdown popper-class="goods-dropdown" @command="handleSkuCommand">
                            <el-tag :type="statusList.color[scope.row.status]">
                              <span>{{ scope.row.status_text }}</span>
                              <el-icon class="sa-m-l-4">
                                <ArrowDown />
                              </el-icon>
                            </el-tag>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item :command="{
                                  goodsId: props.row.id,
                                  id: scope.row.id,
                                  type: 'up',
                                }">
                                  <span class="status-up">上架</span>
                                </el-dropdown-item>
                                <el-dropdown-item :command="{
                                  goodsId: props.row.id,
                                  id: scope.row.id,
                                  type: 'down',
                                }">
                                  <span class="status-down">下架</span>
                                </el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </el-button>
                      </template>
                    </el-table-column> -->
                    <el-table-column label="操作" min-width="240" fixed="right">
                <template #default="scope">
                  <div class="sa-flex">
                    <el-button v-auth="'shop.admin.goods.goods.edit'" link>
                      <!-- <el-dropdown popper-class="goods-dropdown" @command="handleCommand"> -->
                        <el-tag :type="statusList.color[scope.row.status_text]">
                          <span>{{ scope.row.status_text }}</span>
                          <!-- <span>{{ statustext[scope.row.status] }}</span> -->
                          <!-- <el-icon class="sa-m-l-4">
                            <ArrowDown />
                          </el-icon> -->
                        </el-tag>
                        <!-- <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'up',
                            }">
                              <span class="status-up">上架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'down',
                            }">
                              <span class="status-down">下架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'hidden',
                            }">
                              <span class="status-hidden">隐藏</span>
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template> -->
                      <!-- </el-dropdown> -->
                    </el-button>
                    <el-button v-auth="'shop.admin.goods.goods.detail'" class="is-link sa-m-l-12" type="primary"
                      @click="editRow(scope.row)">编辑</el-button>
                      <!-- <el-button class="is-link sa-m-l-12" type="primary"
                      @click="deleteRow(scope.row)" :disabled="scope.row.status_text !== '已下架'">删除</el-button> -->
                      <el-popconfirm
                      width="fit-content"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      title="确认删除这条记录?"
                      :disabled="scope.row.status_text !== '已下架'"
                      @confirm="deleteRow(scope.row)"
                    >
                      <template #reference>
                        <el-button
                          class="is-link"
                          type="danger"
                          :disabled="scope.row.status_text !== '已下架'"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-popconfirm>
                    <!-- <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'history')">记录</el-button>
                    <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'price')">价格变动</el-button> -->
                    <!-- <el-popconfirm
                        width="fit-content"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        title="确认删除这条记录?"
                        @confirm="deleteRow(scope.row.id)"
                      >
                        <template #reference>
                          <el-button
                            v-auth="'shop.admin.goods.goods.delete'"
                            class="is-link"
                            type="danger"
                          >
                            删除
                          </el-button>
                      </el-popconfirm> -->
                  </div>
                </template>
              </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <!-- <el-table-column type="selection" width="48" align="center"></el-table-column> -->
              <el-table-column sortable="custom" prop="goodsSkuCode" label="ID" min-width="180"></el-table-column>
              <el-table-column label="商品" min-width="440">
                <template #default="scope">
                  <goods-item :goods="{
                    image: scope.row.main_img,
                    title: scope.row.title || scope.row.goodsName,
                    subtitle: scope.row.subtitle,
                    activities: scope.row.activities,
                    promos: scope.row.promos,
                  }" mode="goods"></goods-item>
                   <!-- v-if="scope.row.goods_id > 0"
                  <div v-else>{{ scope.row.goodsName }}</div> -->
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="price" label="供货价" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.sellPrice || '--' }}</div>
                  <!-- <div>{{ scope.row.price || '空' }}</div> -->

                  <!-- <div class="sku" v-if="scope.row.is_sku" @click.stop="expandRow(scope.row.id)">
                    <span>多规格</span>
                    <el-icon :class="[
                      'expand-arrow sa-m-l-4',
                      expandRowKeys.includes(scope.row.id)
                        ? 'expand-arrow-up'
                        : 'expand-arrow-down',
                    ]">
                      <ArrowDown />
                    </el-icon>
                  </div> -->
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="price" label="售价" min-width="200"
                align="center">
                <template #default="scope">
                  <div>{{ scope.row.price || '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="buy_price" label="商家采购价" min-width="150" align="center">
                <template #default="scope">
                  <div>{{ scope.row.buy_price ? scope.row.buy_price : '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="sales" label="销量" min-width="100"
                align="center">
                <template #default="scope">
                  <div>{{ scope.row.sales || '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" prop="views" label="浏览量" min-width="100"
                align="center">
                <template #default="scope">
                  <div>{{ scope.row.views }}</div>
                </template>
              </el-table-column>
              <el-table-column label="库存" min-width="100" align="center">
                <template #default="scope">
                  <div class="sa-flex sa-row-center stock">
                    <span>{{ scope.row.stock || 0 }}</span>
                    <!-- <el-button v-auth="'shop.admin.goods.goods.addstock'" class="add-stock" link>
                      <sa-icon name="sa-shop-goods-add-stock" @click="editStock(scope.row)" />
                    </el-button> -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="来源" min-width="100" align="center">
                <template #default="scope">
                  {{ scope.row.from_text || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="更新时间" width="172">
                <template #default="scope">{{ scope.row.create_time || '--' }}</template>
              </el-table-column>
              <!-- <el-table-column label="操作" min-width="240" fixed="right">
                <template #default="scope">
                  <div class="sa-flex">
                    <el-button v-auth="'shop.admin.goods.goods.edit'" link>
                      <el-dropdown popper-class="goods-dropdown" @command="handleCommand(scope.row)">
                        <el-tag :type="statusList.color[scope.row.status]">
                          <span>{{ scope.row.status_text }}</span>
                          <el-icon class="sa-m-l-4">
                            <ArrowDown />
                          </el-icon>
                        </el-tag>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'up',
                            }">
                              <span class="status-up">上架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'down',
                            }">
                              <span class="status-down">下架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'hidden',
                            }">
                              <span class="status-hidden">隐藏</span>
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </el-button>
                    <el-button v-auth="'shop.admin.goods.goods.detail'" class="is-link sa-m-l-12" type="primary"
                      @click="editRow(scope.row)">编辑</el-button>
                    <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="onCopy(scope.row.id)">复制</el-button>
                    <el-popconfirm width="fit-content" confirm-button-text="确认" cancel-button-text="取消"
                      title="确认删除这条记录?" @confirm="deleteRow(scope.row.id)">
                      <template #reference>
                        <el-button v-auth="'shop.admin.goods.goods.delete'" class="is-link" type="danger">
                          删除
                        </el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column> -->
              <el-table-column label="操作" min-width="240" fixed="right">
                <template #default="scope">
                  <div class="sa-flex">
                    <el-button v-auth="'shop.admin.goods.goods.edit'" link>
                      <!-- <el-dropdown popper-class="goods-dropdown" @command="handleCommand"> -->
                        <el-tag :type="statusList.color[scope.row.status_text]">
                          <span>{{ scope.row.status_text }}</span>
                          <!-- <span>{{ statustext[scope.row.status] }}</span> -->
                          <!-- <el-icon class="sa-m-l-4">
                            <ArrowDown />
                          </el-icon> -->
                        </el-tag>
                        <!-- <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'up',
                            }">
                              <span class="status-up">上架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'down',
                            }">
                              <span class="status-down">下架</span>
                            </el-dropdown-item>
                            <el-dropdown-item :command="{
                              id: scope.row.house_goods_id,
                              type: 'hidden',
                            }">
                              <span class="status-hidden">隐藏</span>
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template> -->
                      <!-- </el-dropdown> -->
                    </el-button>
                    <el-button v-auth="'shop.admin.goods.goods.detail'" class="is-link sa-m-l-12" type="primary"
                      @click="editRow(scope.row)">编辑</el-button>
                      <el-button class="is-link sa-m-l-12" type="primary"
                      @click="deleteRow(scope.row)" :disabled="scope.row.status_text !== '已下架'">删除</el-button>
                      <el-popconfirm
                      width="fit-content"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      title="确认删除这条记录?"
                      @confirm="deleteRow(scope.row)"
                    >
                      <template #reference>
                        <el-button
                          class="is-link"
                          type="danger"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-popconfirm>
                    <!-- <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'history')">记录</el-button>
                    <el-button v-auth="'shop.admin.goods.goods.add'" class="is-link sa-m-l-12" type="primary"
                      @click="historyLists(scope.row.id, 'price')">价格变动</el-button> -->
                    <!-- <el-popconfirm
                        width="fit-content"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        title="确认删除这条记录?"
                        @confirm="deleteRow(scope.row.id)"
                      >
                        <template #reference>
                          <el-button
                            v-auth="'shop.admin.goods.goods.delete'"
                            class="is-link"
                            type="danger"
                          >
                            删除
                          </el-button>
                      </el-popconfirm> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-footer class="goods-index-footer">
      <sa-view-bar>
        <!-- <template #left>
          <sa-batch-handle :batchHandleTools="batchHandleTools" :selectedLeng="table.selected.length"
            @batchHandle="batchHandle"></sa-batch-handle>
        </template> -->
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" :pagesize="[10,20]" />
        </template>
      </sa-view-bar>
    </el-footer>
    <el-dialog v-model="dialogVisible" title="操作记录" width="800" :before-close="handleClose">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="address" label="商品ID" v-if="type == 'price'" />
        <el-table-column prop="address" label="供货价" v-if="type == 'price'" />
        <el-table-column prop="address" label="售价" v-if="type == 'price'" />
        <el-table-column prop="address" label="市场价" v-if="type == 'price'" />
        <el-table-column prop="address" label="结算价" v-if="type == 'price'" />
        <el-table-column prop="date" label="操作时间" v-if="type == 'history'" />
        <el-table-column prop="name" label="操作类型" v-if="type == 'history'" />
        <el-table-column prop="address" label="用户名" v-if="type == 'history'" />
        <el-table-column prop="address" label="操作备注" v-if="type == 'history'" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>
<script>
export default {
  name: 'supplychian.admin.goods.list',
};
</script>
<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
import { api } from '../goods.service';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useModal, usePagination } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import { useRouter } from 'vue-router';
import GoodsItem from '@/app/shop/components/goods-item.vue';
import GoodsEdit from './edit.vue';
import GoodsEdit1688 from './edit1688.vue';
import GoodsEditnew from './newedit.vue';
import GoodsRecyclebin from '@/app/shop/admin/goods/goods/recyclebin.vue';
import GoodsStock from '@/app/shop/admin/goods/goods/stock.vue';
import SelfSearch from '@/app/shop/admin/goods/goods/search.vue';
import { cloneDeep } from 'lodash';
import { useRoute } from 'vue-router';
const route = useRoute()
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const tableData = ref([

])
const tabPosition = ref('1688')
async function radiochange(params) {
  filterParams.data.house_id = ''
  // filterParams.data.status = ''
  // name.value = ''
  getData()
}
const handleClose = () => {
  dialogVisible.value = false
}
const type = ref("history")
const historyLists = (id, txt) => {
  dialogVisible.value = true
  type.value = txt
}
const statustext = reactive({
    down:'下架',
    up:'上架',
    hidden:'隐藏',
})
const router = useRouter();
// getType
const statusList = reactive({
  data: [],
  color: {
    all: '',
    up: 'success',
    down: 'danger',
    hidden: 'info',
  },
});
async function getType() {
  statusList.data = [
    // {
    //   name: '全部',
    //   // type: '',
    //   type: 'all',
    // },
    {
      name: '仓库中',
      // type: 2,
      type: 'recyclebin',
    },
    {
      name: '出售中',
      // type: 1,
      type: 'up',
    },
    // {
    //   name: '库存告警',
    //   type: 'down',
    // },
    // {
    //   name: '已售罄',
    //   type: 'hidden',
    // },
    
    // {
    //   name: '异常下架',
    //   type: 'down1',
    // },
    // {
    //   name: '商品黑名单',
    //   type: 'down2',
    // },
  ];
}


const filterParams = reactive({
  tools: {

    activity_type: {
      type: 'tselect',
      label: '搜索日期类型',
      field: 'activity_type',
      value: '',
      options: {
        data: [
          {
            name: "价格变动",
            type: 'change'
          },
          {
            name: "活动中",
            type: "activity"
          },
          {
            name: '选品日期',
            type: "time"
          }
        ],
        props: {
          label: 'name',
          value: 'type',
        },
      },
    },
    create_time: {
      type: 'tdatetimerange',
      label: '对应时间',
      field: 'create_time',
      value: [],
    },
    supply: {
      type: 'tselect',
      label: '供应商',
      field: 'supply',
      value: '',
      options: {
        data: [
          {
            name: "1688",
            type: 'change'
          },
          {
            name: "云中鹤",
            type: "activity"
          },

        ],
        props: {
          label: 'name',
          value: 'type',
        },
      },
    },
    shop: {
      type: 'tselect',
      label: '上架店铺',
      field: 'shop',
      value: '',
      options: {
        data: [
          {
            name: "1688",
            type: 'change'
          },
          {
            name: "云中鹤",
            type: "activity"
          },

        ],
        props: {
          label: 'name',
          value: 'type',
        },
      },
    },
    person: {
      type: 'tselect',
      label: '商品负责人',
      field: 'person',
      value: '',
      options: {
        data: [
          {
            name: "1688",
            type: 'change'
          },
          {
            name: "云中鹤",
            type: "activity"
          },

        ],
        props: {
          label: 'name',
          value: 'type',
        },
      },
    },
    time_type: {
      type: 'tselect',
      label: '商品状态',
      field: 'time_type',
      value: '',
      options: {
        data: [
          {
            name: "等待同步",
            type: 'change'
          },
          {
            name: "同步异常",
            type: "activity"
          },
          {
            name: "同步完成",
            type: "finfish"
          },
        ],
        props: {
          label: 'name',
          value: 'type',
        },
      },
    },
    keyword: {
      type: 'tinputprepend',
      placeholder: '请输入查询内容',
      field: 'keyword',
      keyword: {
        field: 'id',
        value: '',
      },
      options: [
        {
          label: '商品ID',
          value: 'id',
        },
        {
          label: '商品名称',
          value: 'title',
        },
        {
          label: '商品副标题',
          value: 'subtitle',
        },
      ],
    },
    price: { label: '价格区间', value: { min: '', max: '' } },
    sales: { label: '销量区间', value: { min: '', max: '' } },
  },
  data: {
    // status: '2',
    status: 'recyclebin',
    house_id: '',
    keyword: { field: 'id', value: '' },
    category_ids: 'all',
    activity_type: '',
    price: { min: '', max: '' },
    sales: { min: '', max: '' },
  },
  conditionLabel: {},
});
const { openFilter, deleteFilter } = useSearch({
  comp: SelfSearch,
  filterParams,
  getData,
});

const loading = ref(true);

// 表格
const table = reactive({
  data: [],
  order: 'desc',
  sort: 'id',
  selected: [],
});

const { pageData } = usePagination();
// 获取数据
async function getData(page) {
  table.data = []
  if(name.value === '1688'){
    loading.value = true;
  if (page) pageData.page = page;
  let tempSearch = cloneDeep(filterParams.data);
  if (tempSearch.price.min && tempSearch.price.max) {
    tempSearch.price = `${tempSearch.price.min} - ${tempSearch.price.max}`;
  }
  if (tempSearch.sales.min && tempSearch.sales.max) {
    tempSearch.sales = `${tempSearch.sales.min} - ${tempSearch.sales.max}`;
  }
  let search = composeFilter(tempSearch, {
    title: 'like',
    subtitle: 'like',
    // category_ids: {
    //   spacer: ',',
    // },
    price: 'between',
    sales: 'between',
  });
  const statusarr = {
    all:null,
    up:2,
    recyclebin:1
  }
  const { error, data } = await api.shopmy_goods_list({
    page: pageData.page,
    limit: pageData.list_rows,
    cid: filterParams.data.house_id,
    status:statusarr[filterParams.data.status] || 1
  });
  if (error === 0) {
    table.data = data.data;
    if(table.data.length){
      table.data.forEach(item=>{
        if(!item.status){
          item.status = 'down'
        }
      })
    }
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    if (expandRowKeys.length > 0) {
      getSkuPrice(expandRowKeys[0]);
    }
  }
  loading.value = false;
  }else{
    loading.value = true;
  if (page) pageData.page = page;
  let tempSearch = cloneDeep(filterParams.data);
  if (tempSearch.price.min && tempSearch.price.max) {
    tempSearch.price = `${tempSearch.price.min} - ${tempSearch.price.max}`;
  }
  if (tempSearch.sales.min && tempSearch.sales.max) {
    tempSearch.sales = `${tempSearch.sales.min} - ${tempSearch.sales.max}`;
  }
  let search = composeFilter(tempSearch, {
    title: 'like',
    subtitle: 'like',
    // category_ids: {
    //   spacer: ',',
    // },
    price: 'between',
    sales: 'between',
  });
  const statusarr = {
    all:null,
    up:1,
    recyclebin:2
  }
  const bodydata = {
    page: pageData.page,
    list_rows: pageData.list_rows,
    ...search,
    order: table.order,
    sort: table.sort,
    house_id: filterParams.data.house_id,
    type: statusarr[filterParams.data.status] || 2,
  }
  // if(statusarr[filterParams.data.status]){
  //   bodydata.type = statusarr[filterParams.data.status]
  // }
  const { error, data } = await api.getGoodsList(bodydata);
  if (error === 0) {
    table.data = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    if (expandRowKeys.length > 0) {
      getSkuPrice(expandRowKeys[0]);
    }
    table.data.forEach(item=>{
      if(!item.status_text){
        item.status_text = '已下架'
      }
    })
  }
  loading.value = false;
  }
  
}

// table 字段排序
function fieldFilter({ prop, order }) {
  table.order = order == 'ascending' ? 'asc' : 'desc';
  table.sort = prop;
  getData();
}

// table 批量选择
function changeSelection(row) {
  table.selected = row;
}

// 批量操作
const batchHandleTools = [
  {
    type: 'delete',
    label: '删除',
    auth: 'shop.admin.goods.goods.delete',
    class: 'danger',
  },
  {
    type: 'up',
    label: '上架',
    auth: 'shop.admin.goods.goods.edit',
    class: 'success',
  },
  {
    type: 'down',
    label: '下架',
    auth: 'shop.admin.goods.goods.edit',
    class: 'danger',
  },
  {
    type: 'hidden',
    label: '隐藏',
    auth: 'shop.admin.goods.goods.edit',
    class: 'info',
  },
];
async function batchHandle(type) {
  let ids = [];
  table.selected.forEach((row) => {
    ids.push(row.id);
  });
  switch (type) {
    case 'delete':
      ElMessageBox.confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteRow(ids.join(','));
      });
      break;
    default:
      handleCommand({ id: ids.join(','), type: type });
  }
}

function addRow() {
  useModal(
    GoodsEdit,
    {
      title: '添加商品',
      type: 'add',
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}
function editRow(row) {
  useModal(
    GoodsEdit,
    {
      title: '编辑',
      type: 'edit',
      id: row.house_goods_id,
      house_goods_id:row.house_goods_id,
      goods_id:row.goods_id,
      sellPrice:row.sellPrice,
      marketPrice:row.marketPrice,
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}
function editRow1688(row) {
  console.log(row.status)
  useModal(
    // GoodsEdit1688,
    GoodsEditnew,
    {
      title: '编辑',
      type: 'edit',
      id: row.itemId,
      from:'1688',
      price:row.maxPrice,
      sjprice:row.price,
      status:row.status,
      good_id:row.good_id,
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}

async function deleteRow(id) {
  // await api.goods.delete(id);
  await api.delChannelGoods(id.house_goods_id)
  ElMessage.success('删除成功')
  getData();
}
async function deleteRow1688(row) {
  // await api.goods.delete(id);
  await api.shopdown_delt({id:row.id,itemId:row.itemId})
  ElMessage.success('删除成功')
  getData();
}
function openRecyclebin() {
  useModal(
    GoodsRecyclebin,
    {
      title: '回收站',
    },
    {
      confirm: () => {
        getData();
      },
      close: () => {
        getData();
      },
    },
  );
}

let expandRowKeys = reactive([]);
function expandRow(id) {
  skuPrice.data = [];
  if (expandRowKeys.includes(id)) {
    expandRowKeys.length = 0;
  } else {
    expandRowKeys.length = 0;
    expandRowKeys.push(id);
    getSkuPrice(id);
  }
}

const skuPrice = reactive({
  data: [],
});
async function getSkuPrice(id) {
  const { data } = await api.goods.getSkuPrice(id);
  skuPrice.data = data;
}
async function handleCommand(e) {
  console.log('eeeeeeeee',e)
  await api.shopgoods(e.id, {
    status: e.type,
  });
  getData();
}
async function handleSkuCommand(e) {
  await api.goods.updateSkuPrice(e.id, e.type);
  getSkuPrice(e.goodsId);
}

function jumpAc(data) {
  router.push({
    path: '/shop/admin/activity/list',
    query: {
      type: data.type,
    },
  });
}

function editStock(row) {
  useModal(
    GoodsStock,
    {
      title: '补充库存',
      id: row.id,
      stock: row.stock || 0,
      is_sku: row.is_sku,
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}



const name = ref('1688')
onMounted(() => {
  if (route.query) {
    filterParams.data.status = route.query.type;
    filterParams.data.house_id = route.query.id;
    if (route.query.from) {
      name.value = route.query.from
    }
  }
  getType();
  getData();







  let str = "{\"data\":[{\"type\":\"hotzone\",\"data\":{\"src\":\"/storage/default/20250507/75575a613c1f6e2b02def11a0a3c558a.jpg\",\"list\":[{\"width\":706,\"height\":529,\"top\":25,\"left\":24,\"name\":\"普通商品\",\"url\":\"/pages/goods/index?id=378274\"}]},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#FFFFFF\"}}},{\"type\":\"hotzone\",\"data\":{\"src\":\"/storage/default/20250507/094a1134be69815c540435ec7499242a.png\",\"list\":[{\"width\":750,\"height\":486,\"top\":0,\"left\":0,\"name\":\"普通商品\",\"url\":\"/pages/goods/index?id=27777\"}]},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#FFFFFF\"}}},{\"type\":\"imageBlock\",\"data\":{\"src\":\"/storage/default/20250430/fafb83d9838ffc64c14098126eb50b2c.png\",\"url\":\"\"},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":0}},{\"type\":\"titleBlock\",\"data\":{\"src\":\"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/img/shop/decorate/title-1.png\",\"location\":\"center\",\"skew\":0,\"title\":{\"text\":\"致敬劳动者\",\"color\":\"#FCFCFC\",\"textFontSize\":16,\"other\":[\"bold\"]},\"subtitle\":{\"text\":\"清洁用品专区\",\"color\":\"#FBFAFA\",\"textFontSize\":12,\"other\":[]},\"more\":{\"show\":0,\"url\":\"\"}},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":0,\"height\":54}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208792,208733,208739],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208764,208722,208804],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208714,208767,208807],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208746,208724,208816],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"titleBlock\",\"data\":{\"src\":\"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/img/shop/decorate/title-1.png\",\"location\":\"center\",\"skew\":0,\"title\":{\"text\":\"活出精彩自己\",\"color\":\"#FCFCFC\",\"textFontSize\":16,\"other\":[\"bold\"]},\"subtitle\":{\"text\":\"出游好物专区\",\"color\":\"#FBFAFA\",\"textFontSize\":12,\"other\":[]},\"more\":{\"show\":0,\"url\":\"\"}},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":0,\"height\":54}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208759,208827,208832],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208748,208742],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208784,208755,208801],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"goodsShelves\",\"data\":{\"mode\":2,\"goodsFields\":{\"title\":{\"show\":1,\"color\":\"#333\"},\"price\":{\"show\":1,\"color\":\"#ff3000\"}},\"tagStyle\":{\"show\":0,\"src\":\"\"},\"goodsIds\":[208761,208797,208788],\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"space\":7},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#69b27d\"},\"marginLeft\":0,\"marginRight\":0,\"marginTop\":0,\"marginBottom\":0,\"borderRadiusTop\":0,\"borderRadiusBottom\":0,\"padding\":7}},{\"type\":\"hotzone\",\"data\":{\"src\":\"\",\"list\":[]},\"style\":{\"background\":{\"type\":\"color\",\"bgImage\":\"\",\"bgColor\":\"#FFFFFF\"}}}],\"style\":{\"background\":{\"color\":\"\",\"src\":\"\"},\"navbar\":{\"mode\":\"normal\",\"alwaysShow\":0,\"type\":\"color\",\"color\":\"\",\"src\":\"\",\"list\":{\"mp\":[],\"app\":[]}}}}"
  console.log(JSON.parse(str))
});
</script>
<style lang="scss">
.goods-dropdown {
  .status-up {
    color: var(--el-color-success);
  }

  .status-down {
    color: var(--el-color-danger);
  }

  .status-hidden {
    color: var(--el-color-info);
  }
}
</style>
<style lang="scss" scoped>
.goods-view {
  margin: 0 -16px;

  .el-main {
    .sa-table-wrap {
      margin-left: -48px;
      overflow: hidden;
      height: 100%;

      :deep() {
        .el-table__empty-text {
          margin-left: 48px;
        }
      }

      .title {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: var(--sa-font);
      }

      .subtitle {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: var(--sa-subfont);
      }

      .goods-tag {
        max-width: 76px;
        padding: 3px 8px;
        border-radius: 10px;
        line-height: 14px;
        font-size: 12px;
        font-weight: 400;
        margin-right: 8px;
        cursor: pointer;

        &:last-of-type {
          margin-right: 0;
        }

        &.promos-goods {
          color: #faad14;
          background: rgba(250, 173, 20, 0.16);
        }

        &.groupon_ladder-goods,
        &.groupon-goods {
          color: var(--el-color-primary);
          background: var(--t-bg-active);
        }

        &.seckill-goods {
          color: #ff4d4f;
          background: rgba(255, 77, 79, 0.16);
        }
      }

      .sku {
        width: fit-content;
        height: 20px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        padding: 0 8px;
        font-size: 12px;
        color: #fff;
        background: var(--el-color-primary);
        border-radius: 10px;
        cursor: pointer;
      }

      .stock {
        cursor: pointer;

        .add-stock {
          margin-left: 8px;
          color: var(--el-color-primary);
        }
      }

      .el-tag {
        padding: 0 8px;
        border: none;
        cursor: pointer;

        :deep() {
          .el-tag__content {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .sa-expand-table {
      :deep() {
        .el-table__header-wrapper {
          display: none;
        }
      }

      .sku-text {
        font-size: 12px;
        color: var(--sa-font);
      }
    }
  }

  .expand-arrow {
    color: #fff !important;
  }

  .goods-index-main {
    overflow: hidden;
  }

  .el-aside {
    --el-aside-width: 161px;
    border-right: 1px solid var(--sa-border);
    padding: 0 3px;
  }

  .el-aside .category-all {
    line-height: 48px;
    border-radius: 4px;
    padding: 0 12px;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    color: var(--sa-title);
  }

  .el-aside .category-all span:last-child {
    color: var(--el-color-primary);
  }

  .el-aside .category-all:hover {
    background: var(--t-bg-hover);
  }

  .el-aside .category-all.is-active {
    background: var(--t-bg-active);
    color: var(--el-color-primary);
  }

  .el-aside .category-all::after {
    content: '';
    position: absolute;
    right: 9px;
    bottom: 0;
    width: 138px;
    height: 1px;
    background: var(--sa-space);
  }

  .el-aside .el-tree {
    --el-tree-node-content-height: 40px;
    --el-tree-node-hover-bg-color: var(--t-bg-hover);
  }

  .el-aside .el-tree>.el-tree-node>.el-tree-node__content {
    --el-tree-node-content-height: 54px;
    align-items: flex-start;
    position: relative;
  }

  .el-aside .el-tree>.el-tree-node>.el-tree-node__content::after {
    content: '';
    position: absolute;
    right: 9px;
    bottom: 0;
    width: 138px;
    height: 1px;
    background: var(--sa-space);
  }

  .el-aside .el-tree .el-tree-node__content {
    /* align-items: flex-start; */
    padding-top: 6px;
    border-radius: 4px;
  }

  .el-aside .el-tree .name {
    line-height: 20px;
    font-size: 12px;
    color: var(--sa-font);
  }

  .el-aside .el-tree .goods {
    line-height: 16px;
    font-size: 12px;
    color: var(--sa-subfont);
  }

  .el-aside .el-tree:not(.all) .el-tree-node.is-current>.el-tree-node__content {
    background: var(--t-bg-active);
  }

  .el-aside .el-tree:not(.all) .el-tree-node.is-current>.el-tree-node__content .el-tree-node__expand-icon {
    color: var(--el-color-primary);
  }

  .el-aside .el-tree:not(.all) .el-tree-node.is-current>.el-tree-node__content .name {
    color: var(--el-color-primary);
  }

  .el-aside .el-tree:not(.all) .el-tree-node.is-current>.el-tree-node__content .goods {
    color: var(--el-color-primary);
  }

  .goods-index-footer {
    --el-footer-height: fit-content;
  }
}
</style>